<template>
  <div id="overview-wrapper">
    <!-- <div class="overview-content"> -->
    <!-- Loading -->
    <Spin fix v-show="spinShow"></Spin>
    <!--顶部Pannel-->
    <div class="pannel shop-overview shadow">
      <div class="shop-info">
        <!-- 平台信息 -->
        <div class="shop-info-detail">
          <!-- 平台logo -->
          <img
            :src="dataList.head_img|| 'http://wx.qlogo.cn/mmopen/P4OfpXoAEf8e3mHuicNClcxB5d8iamPLIjTqQY1OkkC7mbAbNPnmiayLiaNou4Bia3HrbgmiabGLpr5QpacxHZ65ffXQ3icNxofkl4H/0'"
          />
          <div class="shop-info-content">
            <div class="shop-info-name">
              <!-- 平台名称 -->
              <span>{{dataList.nick_name}}</span>
              <!-- 小程序码 -->
              <Poptip trigger="hover" placement="right">
                <div slot="content" style="width: 200px;height: 200px; margin: auto;">
                  <img :src="recuitUrl + '/saas/get-mp-qr'" style="width: 100%;height: 100%;" alt />
                </div>
                <Button type="primary" size="small">小程序码</Button>
              </Poptip>
            </div>
            <div class="appid flex center">
              <!-- 平台小程序appid -->
              <div>APP_ID：</div>
              <div class="copyBtn" data-clipboard-target=".copyBtn">{{dataList.appid}}</div>
            </div>
          </div>
        </div>
        <!-- 平台运维费 -->
        <!-- <div class="price-wrapper flex column">
						<div class="price-content" :class="head_data.app_balance>=0?'':'warn-balance'">
							<span>平台运维费</span>
							<span v-if="head_data.app_balance<0" style="font-size:12px;">已欠费</span>
							<span>¥</span>
      						<count-to :endVal="head_data.app_balance" :decimals=2 class="count-to"/>
							<Button type="primary" size="small" @click.native="tapRecharege">在线充值</Button>
						</div>
						<div class="price-time">
							<span style="font-size:12px;">到期时间：{{head_data.time_failure}}</span>
						</div>
        </div>-->
        <!-- 版本信息 -->
        <div class="version">
          <Button @click.native="tapVersion" size="small">查看版本</Button>
          <span
            v-if="currentVersion"
            style="font-size:12px;"
          >当前版本： {{currentVersion?currentVersion.version_no:(auditVersion != ''?'审核中':'待提交')}}</span>
          <span v-else style="font-size:12px;">当前版本： 审核未通过</span>
        </div>
      </div>
      <!-- <div class="notice flex center">
					<span>系统公告</span>
					<div class="notice-content elip">
						<Icon type="md-pricetag" /> <a  class="" target="_blank" :href="head_data.notice[0].news_link">{{head_data.notice[0].news_title}}</a>
					</div>
					<Button type="text" size="small" @click.native="tapMoreNotice">更多 ></Button>
      </div>-->
    </div>
    <div class="pannel today-data shadow" style="padding-bottom: 0;">
      <div class="data-content">
        <Row class="disFlex Flex-between Flex-wrap">
          <Col>
            <a class="data-item">
              <div class="count-to" @click="pushShopList(2)">{{todoList.companyNum}}</div>
              <span class="data-item-footer">待审核企业</span>
            </a>
          </Col>
          <Col>
            <a class="data-item" @click="toWhere('jobList')">
              <div class="count-to">{{todoList.jobNum}}</div>
              <span class="data-item-footer">待审核职位</span>
            </a>
          </Col>
          <Col>
            <a class="data-item"  @click="toWhere('postReport')">
              <div class="count-to">{{todoList.jobComplaintNum}}</div>
              <span class="data-item-footer">待处理举报</span>
            </a>
          </Col>
          <Col>
            <a class="data-item" @click="toWhere('audiCash')">
              <div class="count-to">{{todoList.withdrawApplyNum}}</div>
              <span class="data-item-footer">待提现审核</span>
            </a>
          </Col>
        </Row>
      </div>
    </div>
    <div class="pannel today-data shadow" style="padding-bottom: 0;">
      <div class="pannel-title-wrapper">
        <Form
          :model="formItem"
          :label-width="120"
          style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap;height: 70px;"
          class="searchForm"
        >
          <div class="pannel-title disFlex Flex-middle">今日数据</div>
          <FormItem label="选择时间">
            <Select v-model="formItem.type" style="width:150px" @on-change="changeDate">
              <Option value="0">自定义时间段</Option>
              <Option value="1">昨日</Option>
              <Option value="2">近三天</Option>
              <Option value="3">近七天</Option>
              <Option value="4">近三十天</Option>
            </Select>
          </FormItem>
          <FormItem label="时间段" v-if="formItem.type == 0">
            <Row>
              <Col span="11">
                <DatePicker
                  type="datetime"
                  placeholder="请选择开始时间"
                  v-model="formItem.searchDataBegin"
                  @on-change="startDate"
                ></DatePicker>
              </Col>
              <Col span="2" style="text-align: center">-</Col>
              <Col span="11">
                <DatePicker
                  type="datetime"
                  placeholder="请选择结束时间"
                  v-model="formItem.searchDataFinish"
                  @on-change="finishDate"
                ></DatePicker>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="getData">搜索</Button>
          </FormItem>
        </Form>
      </div>
      <!-- 内容 -->
      <div class="data-content">
        <Row class="disFlex Flex-between Flex-wrap">
          <Col>
            <div class="data-item" @click="pushShopList(2)">
              <span class="data-item-title">新增企业</span>
              <div class="count-to">{{overviewRetain.companyNum}}</div>
              <!-- <span class="data-item-footer">待审核企业</span> -->
            </div>
          </Col>
          <Col>
            <a class="data-item" @click="pushShopList(1)">
              <span class="data-item-title">已审核企业</span>
              <div class="count-to">{{todoList.normalCompanyNum}}</div>
              <!-- <span class="data-item-footer">待审核企业</span> -->
            </a>
          </Col>
          <Col>
            <div class="data-item" @click="toWhere('jobList')">
              <span class="data-item-title">新增职位</span>
              <div class="count-to">{{overviewRetain.jobNum}}</div>
              <!-- <span class="data-item-footer">待审核职位</span> -->
            </div>
          </Col>
          <Col>
            <a class="data-item" @click="toWhere('jobList')">
              <span class="data-item-title">在招职位</span>
              <div class="count-to">{{overviewRetain.totalJobNum}}</div>
              <!-- <span class="data-item-footer">待处理举报</span> -->
            </a>
          </Col>
          <Col>
            <div class="data-item" @click="toWhere('resumerCharge')">
              <span class="data-item-title">新增简历</span>
              <div class="count-to">{{overviewRetain.workerNum}}</div>
              <!-- <span class="data-item-footer">待提现审核</span> -->
            </div>
          </Col>
          <Col>
            <a class="data-item" @click="toWhere('resumerCharge')">
              <span class="data-item-title">已沟通简历</span>
              <div class="count-to">{{overviewRetain.workerApplyNum}}</div>
              <!-- <span class="data-item-footer">待提现审核</span> -->
            </a>
          </Col>
        </Row>
      </div>
    </div>
    <div class="pannel today-data shadow" style="padding-bottom: 0;">
      <div class="data-content">
        <Row class="disFlex Flex-between Flex-wrap">
          <Col>
            <div class="data-item">
              <div class="orderTitle">
                <span class="data-item-title">充值流水</span>
                <div class="question-icon">
                  <Poptip
                    trigger="hover"
                    :title="rechargeTitle"
                    :content="rechargeContent"
                    placement="right"
                  >
                    <Icon style="padding-bottom:5px" type="md-help" />
                  </Poptip>
                </div>
              </div>
              <div class="combine-count-to">
                <div class="middle-money-count-to">{{orderList.rechargeSum}}</div>
                <span class="middle-count-to">元</span>
              </div>
              <div class="combine-count-to">
                <div class="small-money-count-to">{{orderList.rechargeCount}}</div>
                <span class="small-count-to">笔</span>
              </div>
            </div>
          </Col>
          <div class="cutline"></div>
          <Col>
            <div class="data-item">
              <div class="orderTitle">
                <span class="data-item-title">业务流水</span>
                <div class="question-icon">
                  <Poptip
                    trigger="hover"
                    :title="orderTitle"
                    :content="orderContent"
                    placement="right"
                  >
                    <Icon style="padding-bottom:5px" type="md-help" />
                  </Poptip>
                </div>
              </div>
              <div class="combine-count-to">
                <div class="middle-money-count-to">{{orderList.consumeSum}}</div>
                <span class="middle-count-to">元</span>
              </div>

              <div class="combine-count-to">
                <div class="small-money-count-to">{{orderList.consumeCount}}</div>
                <span class="small-count-to">笔</span>
              </div>
            </div>
          </Col>
          <div class="cutline"></div>
          <Col>
            <div class="data-item">
              <div class="orderTitle">
                <span class="data-item-title">账户余额</span>
                <div class="question-icon">
                  <Poptip
                    trigger="hover"
                    :title="accountTitle"
                    :content="accountContent"
                    placement="right"
                  >
                    <Icon style="padding-bottom:5px" type="md-help" />
                  </Poptip>
                </div>
              </div>
              <div class="combine-count-to">
                <div class="middle-money-count-to">{{orderList.companySum}}</div>
                <span class="middle-count-to">元</span>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    </div>
    <!-- <Row :gutter="10">
      <Col span="12">
        <div class="pannel shadow" style="margin-bottom:0;width: calc(100% - 7px);">
          <div class="pannel-title-wrapper disFlex Flex-middle">
            <div class="pannel-title disFlex Flex-middle">商城客单价</div>
            <div class="optionspicker-area">
              <DatePicker
                size="default"
                style="width:180px"
                class="input"
                type="datetimerange"
                format="yyyy-MM-dd"
                @on-change="changeDate"
                @on-ok="getData('A')"
                @on-clear="getFullData('A')"
                :options="options2"
                placeholder=" 近7天数据"
              ></DatePicker>
            </div>
          </div>
          <line-chart :chartData="per_customer_trans" style="height: 300px;"></line-chart>
        </div>
      </Col>
      <Col span="12">
        <div class="pannel" style="margin-bottom:0;width: calc(100% - 7px);margin-left: 7px;">
          <div class="pannel-title-wrapper disFlex Flex-middle">
            <div class="pannel-title disFlex Flex-middle">新老用户占比</div>
            <div class="optionspicker-area">
              <DatePicker
                size="default"
                style="width:180px"
                class="input"
                type="datetimerange"
                format="yyyy-MM-dd"
                @on-change="changeDate"
                @on-ok="getData('B')"
                @on-clear="getFullData('B')"
                :options="options2"
                placeholder=" 昨天数据"
              ></DatePicker>
            </div>
          </div>
          <div class="disFlex vertical Flex-middle">
            <div class="disFlex" style="position:relative;top:10px;">
              <div
                @click="new_old_user_condition=0"
                class="switch-btn"
                :class="new_old_user_condition==0?'chosed':''"
              >按购买</div>
              <div
                @click="new_old_user_condition=1"
                class="switch-btn"
                :class="new_old_user_condition==1?'chosed':''"
              >按访问</div>
            </div>
            <pie-chart :chartData="new_old_user_data" style="height: 276px;"></pie-chart>
          </div>
        </div>
      </Col>
    </Row>-->
  </div>
</template>

<script>
import { Info, GetVersion, OverviewEntrance } from "api/recuit/setting";
import Config from "@/config";
import LineChart from "_c/echarts/line-chart.vue";
import PieChart from "_c/echarts/pie.vue";

export default {
  data() {
    return {
      rechargeTitle: "进账金额",
      rechargeContent: "进账金额 = 已使用金额 + 待使用金额",
      orderTitle: "企业账户已使用余额",
      orderContent: "企业购买业务所支付金额，比如购买置顶、购买简历等",
      accountTitle: "待使用金额",
      accountContent: "所有企业账户余额的总和",
      dataList: {},

      recuitUrl: "",
      currentVersion: "",
      formItem: {
        type: "0",
        searchDataBegin: "",
        searchDataFinish: ""
      },
      per_customer_trans: {},
      new_old_user_data: {},
      todoList: {},
      overviewRetain: {},
      orderList: {}
    };
  },
  methods: {
    tapVersion() {
      this.$router.replace("/survey/surveyContent/version");
    },

    changeDate(e) {
      var currentDayTimeStamp = new Date().setHours(0, 0, 0, 0) / 1000;
      let type = e;
      var finishTimeStamp = currentDayTimeStamp;

      switch (type) {
        case "0": //自定义时间段
          break;
        case "1": //昨日
          var startTimeStamp = currentDayTimeStamp - 86400;
          break;
        case "2": //近三天
          var startTimeStamp = currentDayTimeStamp - 86400 * 3;
          break;
        case "3": //近七天
          var startTimeStamp = currentDayTimeStamp - 86400 * 7;
          break;
        case "4": //近三十天
          var startTimeStamp = currentDayTimeStamp - 86400 * 30;
          break;
        default:
          break;
      }

      this.formItem.type = type;
      this.formItem.searchDataBegin = startTimeStamp;
      this.formItem.searchDataFinish = finishTimeStamp;
    },
    getData() {
      let formItem = JSON.parse(JSON.stringify(this.formItem));
      this.$Loading.start();

      OverviewEntrance(formItem).then(result => {
        if (result) {
          this.todoList = result.todoList;
          this.overviewRetain = result.overviewRetain;
          this.orderList = result.orderList;
          this.$Loading.finish();
        }
      });
    },
    pushShopList(status = 1) {
      this.$router.push({
        name: "shopList",
        params: { auditStatus: status }
      });
    },
    toWhere(name) {
      this.$router.push({ name });
    }
  },
  components: {
    LineChart,
    PieChart
  },
  computed: {},
  mounted() {
    this.recuitUrl = `${Config.recuitUrl}`;
    this.$Loading.start();
    Info()
      .then(result => {
        this.dataList = result;
        GetVersion().then(result => {
          this.currentVersion = result.currentVersion;
          this.versionInfo = result;
          this.$Loading.finish();
        });
      })
      .catch(err => {
        this.$Message.error(err);
      });
    this.getData();
  },
  created() {}
};
</script>

<style lang="less" scoped>
@import url("../../../my-theme/color.less");

/* #overview-wrapper::-webkit-scrollbar {
        display: none!important;
    }  */
#overview-wrapper {
  margin: 24px 24px 0 24px;
  position: relative;
}

.overview-content {
  position: relative;
}

// appid复制样式
.copyBtn {
  cursor: pointer;
}

/*面板*/
.pannel {
  margin-bottom: 24px;
  padding: 10px 20px;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

/*顶部pannel 开始*/
.shop-overview {
  padding-top: 0;
  padding-bottom: 0;
}
.shop-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  // border-bottom: solid 1px #eeeeee;
}
.shop-info-detail {
  display: flex;
  align-items: center;
}
.shop-info-detail img {
  min-width: 84px;
  width: 84px;
  height: 84px;
  border-radius: 42px;
  background: lightcyan;
}
.shop-info-content {
  display: flex;
  flex-direction: column;
  margin-left: 14px;
}
.shop-info-name {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.shop-info-name span:first-child {
  font-weight: bold;
  font-size: 14px;
  margin-right: 10px;
  color: black;
}
.appid {
  font-size: 12px;
  color: black;
}
.version {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: @bc-text-weaken-color;
  font-size: 14px;
}
.btn-version {
  color: @bc-text-weaken-color;
  border: 1px solid @bc-text-weaken-color;
  padding: 0 3px;
  border-radius: 5px;
  cursor: pointer;
}
.version span:last-child {
  margin-top: 6px;
}
.price-wrapper {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
  font-size: 14px;
}
.price-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
}
.price-content span:first-child {
  color: black;
  font-weight: bold;
  font-size: 14px;
}
.price-content span:nth-child(2) {
  color: @bc-primary-color;
  margin-left: 10px;
}
.price-content span:nth-child(3) {
  color: @bc-primary-color;
  margin-left: 4px;
}
.price-content.warn-balance span:nth-child(2) {
  color: @bc-error-color;
  margin-left: 10px;
}
.price-content.warn-balance span:nth-child(3) {
  color: @bc-error-color;
  margin-left: 4px;
}
.price-content button {
  margin-left: 10px;
}

/*顶部信息 结束*/

/*公告 开始*/
.notice {
  margin-top: 10px;
}
.notice span {
  margin-right: 10px;
  color: black;
  font-weight: bold;
  font-size: 14px;
}
.notice-content {
  color: @bc-text-weaken-color;
}
.notice-content a {
  color: @bc-text-weaken-color;
}
.notice-content span {
  color: @bc-text-weaken-color;
}
.notice button {
  font-size: 12px;
  color: @bc-primary-color;
  margin-left: 30px;
}
/*公告结束*/

.pannel-title-wrapper {
  padding-bottom: 10px;
  border-bottom: 1px solid #eeeeee;
}
.pannel-title {
  font-size: 14px;
  font-weight: bold;
  color: black;
  min-height: 32px;
}
.arrow_pic {
  width: 30px;
  height: 30px;
}

.arrow_pic_sm {
  width: 18px;
  height: 18px;
}

/*成交额和访问人数 开始*/
.data-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  /*flex: 1;*/
}
.item-hover {
  cursor: pointer;
  &:hover {
    color: #57a3f3;
    text-decoration: underline;
  }
}
.data-item-title {
  font-size: 14px;
  line-height: 23px;
  margin-bottom: 16px;
  color: @bc-text-weaken-color;
}
.data-item-value {
  font-size: 24px;
  line-height: 35px;
  color: @bc-text-weaken-color;
  font-family: "DINN";
}
.data-item-footer {
  font-size: 12px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 38px;
}
.data-item .count-to {
  font-size: 48px;
  line-height: 45px;
  color: @bc-primary-color;
  font-family: "DINN";
}

.data-item .middle-money-count-to {
  font-size: 36px;
  line-height: 36px;
  color: @bc-primary-color;
  font-family: "DINN";
}

.data-item .middle-count-to {
  font-size: 25px;
  line-height: 25px;
  color: @bc-primary-color;
  font-family: "DINN";
}

.data-item .small-money-count-to {
  font-size: 24px;
  line-height: 24px;
  color: @bc-primary-color;
  font-family: "DINN";
}

.data-item .small-count-to {
  font-size: 15px;
  line-height: 15px;
  color: @bc-primary-color;
  font-family: "DINN";
}

.data-item .combine-count-to {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.point {
  cursor: pointer;
}

.data-item .withMark::before {
  content: "￥";
  font-size: 36px;
  font-family: PingFang-SC-Bold;
  font-weight: bold;
  color: rgba(22, 118, 235, 1);
  position: relative;
  right: -10px;
}
.warn-balance {
  color: @bc-error-color;
}
.data-item .number-val-up {
  color: #f64031;
  font-family: "DINN";
}
.data-item .number-val-down {
  color: #00cc66;
  font-family: "DINN";
}
.today-deal,
.lastday-uv {
  padding-top: 20px;
  padding-bottom: 20px;
}
.today-deal-value,
.lastday-uv-value {
  font-size: 24px;
  line-height: 24px;
  color: black;
  margin-right: 5px;
  font-family: "DINN";
}
/*成交额和访问人数 结束*/

/*今日数据 开始*/
.data-content {
  padding: 20px 0;
}
.data-item.top {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
}

.switch-btn {
  font-size: 13px;
  padding: 0 10px;
  margin-top: 5px;
  cursor: pointer;
  color: black;
}

.switch-btn.chosed {
  color: @bc-primary-color;
}
.half {
  flex: 0.5;
  min-height: 350px;
}

.top10-title {
  color: black;
  font-size: 14px;
  padding: 12px 0;
  text-align: center;
}
.top10-content {
  color: black;
  font-size: 14px;
  margin: 5px 10px;
}
.top-title {
  margin-left: 16px;
  margin-right: 16px;
  flex: 1;
}
.top10-right-content {
  white-space: nowrap;
}
.top-content-0 {
  color: #f64031;
}
.top-content-1 {
  color: #00cc66;
}
.top-content-2 {
  color: @bc-primary-color;
}
.optionspicker-area {
  margin-left: auto;
}
.dayspicker {
  margin-left: 10px;
  font-family: PingFang-SC-Bold;
  color: rgba(0, 0, 0, 1);
  line-height: 48px;
  font-size: 13px;
  cursor: pointer;
}
.datepicker-tip {
  font-size: 14px;
  font-family: PingFang-SC-Bold;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  line-height: 48px;
  margin-right: 10px;
  margin-left: 18px;
}
.timeSpan {
  margin: 0 10px;
  font-size: 14px;
  font-family: PingFang-SC-Bold;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  line-height: 48px;
}
.active {
  color: #1676eb;
}
/*平台文档*/
.document-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.document-item {
  font-size: 14px;
}
.document-item button {
  color: #2d8cf0;
}
.ivu-form-item {
  margin-bottom: 0;
}
.orderTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.question-icon {
  border: 1px solid;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  margin-left: 3px;
  margin-bottom: 16px;
}
.cutline {
  width: 1px;
  height: 80px;
  background: #eeeeee;
}
</style>